<template>
<div class="table">
        <div class="divSearch">
            <!--搜索框-->
            <Row>
                <!--根据需求删除不不要查询条件-->
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <label class="searchLabel">地区:</label>
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option :value="userinfo.AreaCode" v-show="isProvince">全部</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <label class="searchLabel">年份:</label>
                    <Select v-model="searchModel.FillInYear"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option value="">全部</Option>
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictText">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
                    <label class="searchLabel">填报季度:</label>
                   <Select  placeholder="请选择..." class="searchInput"  v-model="searchModel.TimesCycle" @on-change="getStatsList()">
                        <Option value="">全部</Option>
                        <Option v-for="item in QuarterCycleList" :value="item.DictText" :key="item.DictText">{{ item.DictText }}</Option>
					</Select>	
                </Col>
                <!-- <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
                    <Button icon="ios-search" type="primary" @click="getStatsList()" class="searchButton">查询</Button>
                </Col> -->
                <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
                    <Button icon="ios-export" type="primary" @click="getExcelData()" class="searchButton">数据导出</Button>
                </Col>
                <Col >
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><span class="iconTitle">列表</span><Icon type="ios-paper" size="16"></Icon></Radio>
                        <Radio label="pieShow" title="饼图"><span class="iconTitle">柱状图</span><Icon type="ios-pie" size="16"></Icon></Radio>   
                        <Radio label="mapShow" title="地图"><span class="iconTitle">地图</span><Icon type="android-map" size="16"></Icon></Radio>                                                                               
                    </RadioGroup>    
                </Col>
            </Row>
        </div>
        <Row  v-show="listShow">
            <!-- 列表-->
            <Col>
                <table  class="ContentTable">
                    <caption>
                        <div>
                            <span class="tableNum">{{searchModel.FillInYear}}(三){{CurrentAreaName}}主要蔬菜生产情况季度调查表(全面统计)</span>
                            <span class="tip">单位：亩</span>
                        </div>
                    </caption>
                     <thead>
                        <tr>
                            <th width="72" rowspan="2">种类</th>
                            <th rowspan="2">本季度蔬菜累计播种面积合计</th>
                            <th rowspan="2">上年同期面积</th>
                            <th rowspan="2">比上年同期增减%</th>
                            <th colspan="12">其中</th>
                            <!-- <th v-show="isProvince" rowspan="2" width="100px">操作</th> -->
                        </tr>
                        <tr>
                            <th>本季度露地蔬菜累计播种面积</th>
                            <th>上年同期面积</th>
                            <th>比上年同期增减%</th>
                            <th>本季度小棚蔬菜累计播种面积</th>
                            <th>上年同期面积</th>
                            <th>比上年同期增减%</th>
                            <th>本季度大中棚蔬菜累计播种面积</th>
                            <th>上年同期面积</th>
                            <th>比上年同期增减%</th>
                            <th>本季度温室蔬菜累计播种面积</th>
                            <th>上年同期面积</th>
                            <th>比上年同期增减%</th>
                        </tr>
                    </thead>
                    <tbody>
                         <tr v-for="(item,index)  in datas" :key="item.Veg_Type" :class="{'tdColor':index%2!=0}">
                            <td width="72">{{item.Veg_Type}}</td>
                            <td>{{Math.round((getZero(item.LD_Area)+getZero(item.XP_Area)+getZero(item.DZP_Area)+getZero(item.WS_Area))*100)/100|formatCurrency}}</td>
                            <td>{{Math.round((getZero(item.OldLD_Area)+getZero(item.OldXP_Area)+getZero(item.OldDZP_Area)+getZero(item.OldWS_Area))*100)/100|formatCurrency}}</td>
                            <td>{{getDivided(((getZero(item.LD_Area)+getZero(item.XP_Area)+getZero(item.DZP_Area)+getZero(item.WS_Area))-(getZero(item.OldLD_Area)+getZero(item.OldXP_Area)+getZero(item.OldDZP_Area)+getZero(item.OldWS_Area))),getZero(item.OldLD_Area)+getZero(item.OldXP_Area)+getZero(item.OldDZP_Area)+getZero(item.OldWS_Area))}}</td>
                            <td>{{item.LD_Area|formatCurrency}}</td>
                            <td>{{item.OldLD_Area|formatCurrency}}</td>
                            <td>{{getDivided((getZero(item.LD_Area)-getZero(item.OldLD_Area)),getZero(item.OldLD_Area))}}</td>
                            <td>{{item.XP_Area|formatCurrency}}</td>
                            <td>{{item.OldXP_Area|formatCurrency}}</td>
                            <td>{{getDivided((getZero(item.XP_Area)-getZero(item.OldXP_Area)),getZero(item.OldXP_Area))}}</td>
                            <td>{{item.DZP_Area|formatCurrency}}</td>
                            <td>{{item.OldDZP_Area|formatCurrency}}</td>
                            <td>{{getDivided((getZero(item.DZP_Area)-getZero(item.OldDZP_Area)),getZero(item.OldDZP_Area))}}</td>
                            <td>{{item.WS_Area|formatCurrency}}</td>
                            <td>{{item.OldWS_Area|formatCurrency}}</td>
                            <td>{{getDivided((getZero(item.WS_Area)-getZero(item.OldWS_Area)),getZero(item.OldWS_Area))}}</td>
                            <!-- <td v-show="isProvince" width="100px">
                                <Button  size="small" type="primary"  @click="getDetail(item.AreaCode)">详情</Button>
                                <Button  size="small" type="primary" @click="getExcelData(item.AreaCode)">导出</Button>
                            </td> -->
                        </tr>
                        <tr v-if="datas.length==0"><td colspan="6">暂无数据</td></tr>
                    </tbody>
                </table>
            </Col>
        </Row>
        <Row v-show="pieShow">
            <!--饼图-->
            <div id="divPie" style="width:1200px;height:670px;">饼图</div>
        </Row>
        <Row  v-show="mapShow">
            <!--地图展示-->
            <div id="divMap"  style="width:1200px;height:670px;">地图</div>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            QuarterCycleList:this.GetGroupDict("QuarterCycleValue"),//月份周期值
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: this.SearchAreaList(this.GetlocaStorage("VegUserInfo").AreaCode),
            TotalData:[],
            ItemList:[],
            Option:'1',
            CurrentAreaName:'',
            userinfo: this.GetlocaStorage("VegUserInfo"),//获取当前用户信息
            CheckButton:'listShow',
            pieLegendData:[],//饼图选择项
            datas:[],//列表数据
            detailDatas:[],//详情
            pieData:[],
            geoCoordMapData:[],//当前市(州)、县(区)坐标信息
            StatsData:[],//地区-汇总数据
            isProvince:false,//是否为省级账号(操作栏目显示)
            detailView:false,//modal显示开关
            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'VegProSurvey',
                FillInYear: '',
                TimesCycle:'',//季度值
                TimesType: '',
                AreaCode: this.GetlocaStorage("VegUserInfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '4',
                ItemCode:'',
                Opinion: ''
            },
            listShow:false,//列表显示控制器
            pieShow:false,//饼图显示控制器
            mapShow:false,//地图显示控制器
        }  
    },
    //方法
    methods: {
         //展示切换
        changeButton:function(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.pieShow=false;
                this.mapShow=false;
            }
            else if(n=="pieShow")
            {
                this.listShow=false;
                this.pieShow=true;//显示饼图
                this.mapShow=false;
            }
             else if(n=="mapShow")
            {
                this.listShow=false;
                this.pieShow=false;//显示地图
                this.mapShow=true;
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.pieShow=false;
                 this.mapShow=false;
            }
        },
        getStatsList(){
            var self=this;
             console.log(this.searchModel.TimesCycle);
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear  = self.searchModel.FillInYear;
            } else {
                self.searchModel.FillInYear = self.CurrentYear + '年';//填报年度-----数据字典值
            }
            if(this.searchModel.AreaCode=="530000000000")
            {
                self.isProvince=true;
            }
            self.datas=[];
            self.$http.post('VegProSurvey/PostStats', self.searchModel).then(function (res) {
                if(res.data.status===1)
                {
                    self.CurrentAreaName=res.data.model[0].AreaName;
                    self.datas= res.data.model;
                }
            });
        },
        getExcelData(){
            console.log(this.searchModel.TimesCycle);
            window.open(this.$http.defaults.baseURL 
            + "VegProSurvey/GetStatsExcelData?AreaCode="+this.searchModel.AreaCode
            +"&&FillInYear="+this.searchModel.FillInYear+"&&Status="+this.searchModel.Status
            +"&&ReportCode="+this.searchModel.ReportCode
            +"&&TimesCycle="+this.searchModel.TimesCycle
            +"&&ItemCode="+this.searchModel.ItemCode);
        },
        getCurrentCycle(){
            var month =new Date().getMonth()+10;//月份从0-11，分别代表十二个月份值。
            if(month>=1&&month<= 3) {
                return '第一季度';
            }else if(month>=4&&month <= 6) {                
                return '第二季度';
            }else if(month>=7&&month <=9) {
                return '第三季度';
            }else if(month>=10&&month <=12) {
                return '第四季度';
            }
        }
    },
    //创建Vue页面方法
    created: function () {
        this.changeButton("listShow");
        this.getStatsList();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>
